// @ts-ignore
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Input, Swiper, SwiperItem, Image, Button } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtIcon, AtFloatLayout, AtModal } from 'taro-ui'

import './index.scss'
import Footer from '../components/footer'

import { chackLogin } from '../../api/service/user'

export default class Index extends Component {

    state = {
        openId: '',
        phoneNumber: '18018660215',
        current: 0,
        amountList: [
            [{id: 101, phone: '10', amount: 10}, {id: 102, phone: '20', amount: 20}, {id: 103, phone: '30', amount: 30}],
            [{id: 104, phone: '50', amount: 50}, {id: 105, phone: '100', amount: 100}, {id: 106, phone: '200', amount: 200}],
            [{id: 107, phone: '300', amount: 300}, {id: 108, phone: '500', amount: 500}, {id: 109, phone: '800', amount: 800}]
        ],
        flowList: [
            [{id: 201, flow: '200M', amount: 10}, {id: 202, flow: '500M', amount: 15}, {id: 203, flow: '800M', amount: 20}],
            [{id: 204, flow: '1GB', amount: 50}, {id: 205, flow: '2GB', amount: 90}, {id: 206, flow: '3GB', amount: 120}],
            [{id: 207, flow: '5GB', amount: 200}, {id: 208, flow: '8GB', amount: 300}, {id: 209, flow: '10GB', amount: 350}]
        ],
        couponsImage10: '../../assets/images/coupons/coupons_10.png',
        couponsImage20: '../../assets/images/coupons/coupons_20.png',
        couponsImage30: '../../assets/images/coupons/coupons_30.png',
        isOpen: false,
        showModal: false,
        payAmount: 0
    }

    componentWillMount () { }

    componentDidMount () { }

    componentWillUnmount () { }

    componentDidShow () { }

    componentDidHide () { }

    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '充值中心',
        navigationBarBackgroundColor: '#3775F6',
        navigationBarTextStyle: 'white',
        // 设置为 true 则页面整体不能上下滚动
        disableScroll: false,
    }

    // 值变动
    handleChange(event){
        let val = event.detail.value;
        this.setState({phoneNumber: val});
    }

    // Tab单击事件
    handleClick = (stateName, value) => {
        this.setState({
            [stateName]: value,
            isOpen: false
        });
    }

    // 单击充值话费
    handleRechargeClick = (id) => {
        Taro.showLoading({title: '充值中...'});
        // 校验用户是否登录
        chackLogin().then(() => {
            Taro.hideLoading();
            let json = JSON.parse(Taro.getStorageSync('token'));
			console.log('openId', json.openid);
            this.setState({openId: json.openid});

            const array = [];
            this.state.amountList.map(item => {array.push(...item)});
            let item = array.find(obj => {
                return obj.id == id;
            });
            this.setState({
                isOpen: true,
                payAmount: item.amount
            });
        }).catch(() => {
            Taro.hideLoading();
            Taro.navigateTo({
				url: "/pages/auth/login/index"
			});

        });        
    }

    // 单击充值流量
    handleFlowClick = (id) => {
        const array = [];
        this.state.flowList.map(item => {array.push(...item)});
        let item = array.find(obj => {
            return obj.id == id;
        });
        this.setState({
            isOpen: true,
            payAmount: item.amount
        });
    }

    // FloatLayout关闭事件
    handleFloatClose = () => {
        this.setState({
            showModal: true
        })
    }

    // 是否放弃支付
    handleCancelClick = () => {
        this.setState({
            isOpen: false,
            showModal: false
        });
    }

    // 关闭选择弹框
    handleConfirmClick = () => {
        this.setState({showModal: false});
    }

    render () {
        const { phoneNumber, current, amountList, flowList, isOpen, showModal,
            couponsImage10, couponsImage20, couponsImage30, payAmount } = this.state
        const tabList = [{title: '充值话费'}, {title: '充值流量'}]
        return (
            <View className='pages'>
                <View className='page-title'>
                    <Text className='phone-default'>{phoneNumber ? '手机号码' : '请输入手机号'}</Text>
                    <Input name='phoneNumber' value={phoneNumber} type='number' className='phone-number' maxlength={11} 
                           onInput={this.handleChange.bind(this)}/>
                </View>
                <View className='phone-amount'>
                    <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this, 'current')}>
                        <AtTabsPane current= {current} index={0} className='amount-pane'>
                            {amountList.map((item, index) =>(
                                <View className='at-row amount-row' key={index}>
                                    <View className='at-row at-row__justify--between'>
                                        {item.map((t, idx) => (
                                            <View className='at-col at-col-4' key={idx}>
                                                <View className='amount-text' onClick={this.handleRechargeClick.bind(this, t.id)}>
                                                    <Text className='amount-value'>{t.phone}</Text>
                                                    <Text className='amount-unit'>元</Text>
                                                    <View className='amount-price'>售价{t.amount}元</View>
                                                </View>
                                            </View>
                                        ))}
                                    </View>
                                </View>
                            ))}
                            <View><AtIcon value='alert-circle' size='18' color='#DCB96F'></AtIcon><Text className='alert-txt'>充话费，得喜爱积分</Text></View>
                        </AtTabsPane>
                        <AtTabsPane current= {current} index={1} className='amount-pane'>
                            {flowList.map((item, index) => (
                                <View className='at-row amount-row' key={index}>
                                    <View className='at-row at-row__justify--between'>
                                        {item.map((t, idx) => (
                                            <View className='at-col at-col-4' key={idx}>
                                                <View className='amount-text' onClick={this.handleFlowClick.bind(this, t.id)}>
                                                    <Text className='amount-value'>{t.flow}</Text>
                                                    <View className='amount-price'>售价{t.amount}元</View>
                                                </View>
                                            </View>
                                        ))}
                                    </View>
                                </View>
                            ))}
                        </AtTabsPane>
                    </AtTabs>
                </View>
                <View className='swiper-content'>
                    <Swiper circular autoplay>
                        <SwiperItem>
                            <View className='at-row'>
                                <View className='at-col'>
                                    <View className='cont-txt'>
                                        <Text className='cont-amount'>0.5~99元</Text>
                                        <Text>生活福利免费领</Text>
                                    </View>
                                    <View className='cont-desc'>话费/缴费/实体店优惠券</View>
                                </View>
                                <View className='at-col at-col-3 at-col-auto'>
                                    <Image src={couponsImage10} className='con-image'></Image>
                                </View>
                            </View>
                        </SwiperItem>
                        <SwiperItem>
                            <View className='at-row'>
                                <View className='at-col'>
                                    <View className='cont-txt'>
                                        <Text className='cont-amount'>0.5~99元</Text>
                                        <Text>生活福利免费领</Text>
                                    </View>
                                    <View className='cont-desc'>话费/水电燃优惠券</View>
                                </View>
                                <View className='at-col at-col-3 at-col-auto'>
                                    <Image src={couponsImage20} className='con-image'></Image>
                                </View>
                            </View>
                        </SwiperItem>
                        <SwiperItem>
                            <View className='at-row'>
                                <View className='at-col'>
                                    <View className='cont-txt'>
                                        <Text className='cont-amount'>0.5~99元</Text>
                                        <Text>生活福利免费领</Text>
                                    </View>
                                    <View className='cont-desc'>流量/加油优惠券</View>
                                </View>
                                <View className='at-col at-col-3 at-col-auto'>
                                    <Image src={couponsImage30} className='con-image'></Image>
                                </View>
                            </View>
                        </SwiperItem>
                    </Swiper>
                </View>

                {/* 支付弹框 */}
                <AtFloatLayout isOpened={isOpen} title="支付金额" onClose={this.handleFloatClose.bind(this)}>
                    <View className='pay-cont'>
                        <View className='pay-amount'>
                            <Text className='yuan'>￥</Text>
                            <Text>{payAmount}</Text>
                            <Text>.00</Text>
                        </View>
                        <View className='at-row pay-info link'>
                            <View className='at-col pay-title'>订单信息</View>
                            <View className='at-col at-col-3 at-col--auot pay-right'>手机充值</View>
                        </View>
                        <View className='at-row pay-info'>
                            <View className='at-col pay-title'>付款方式</View>
                            <View className='at-col at-col-3 at-col--auot pay-right'>零钱</View>
                        </View>
                    </View>
                    <View className='pay-click'>
                        <Button className='pay-btn'>立即支付</Button>
                    </View>
                </AtFloatLayout>

                {/* 是否继续支付 */}
                <AtModal isOpened={showModal} cancelText='放 弃' 
                    confirmText='继续支付' 
                    onCancel={this.handleCancelClick.bind(this)}
                    onConfirm={this.handleConfirmClick.bind(this)} 
                    content='是否放弃本次付款？'>
                </AtModal>

                {/* 页面尾部描述 */}
                <Footer/>
            </View>
        )
    }
}
